<template>
  <div class="customization">
    <!-- 左边设置内容 -->
    <div class="customization-left">
      <!-- 主页自定义 -->
      <!-- active-color 激活的开关颜色
      inactive-color 未激活的开关颜色-->
      <!-- 产品动态 -->
      <div class="customItem style1">
        <div class="itemName">待办事项</div>
        <el-switch
          active-color="#409eff"
          inactive-color="#999"
          @change="handleSaveSet"
          v-model="leftData.productDynamic"
        ></el-switch>
      </div>
      <!-- 消息提醒 -->
      <div class="customItem style1">
        <div class="itemName">系统消息</div>
        <el-switch
          active-color="#409eff"
          inactive-color="#999"
          @change="handleSaveSet"
          v-model="leftData.notification"
        ></el-switch>
      </div>
      <!-- 营销活动配置 -->
      <div class="customItem style2">
        <div class="itemName">营销活动设置：</div>
        <span class="activity">支付功能</span>
        <el-switch
          style="margin-right: 40px"
          active-color="#409eff"
          inactive-color="#999"
          @change="handleSaveSet"
          v-model="leftData.payment"
        ></el-switch>
        <span class="activity">硬件商城</span>
        <el-switch
          style="margin-right: 40px"
          active-color="#409eff"
          inactive-color="#999"
          @change="handleSaveSet"
          v-model="leftData.hardwareStore"
        ></el-switch>
        <span class="activity">推荐有礼</span>
        <el-switch
          style="margin-right: 40px"
          active-color="#409eff"
          inactive-color="#999"
          @change="handleSaveSet"
          v-model="leftData.courteous"
        ></el-switch>
      </div>
      <!-- 客服编辑 -->
      <div class="customItem style2">
        <div class="itemName">
          客服编辑
          <el-switch active-color="#409eff" inactive-color="#999" v-model="leftData.markeEdit"></el-switch>
        </div>
        <el-row type="flex" class="row-bg">
          <!-- action="http://192.168.1.220:8003/UserInfo/PTUploadLogoFilesAjax" -->
          <el-col :span="4">
            <el-upload
              action="/UserInfo/PTUploadLogoFilesAjax"
              list-type="picture-card"
              :on-success="handlePictureCardPreview"
              :on-remove="handleRemove"
              :limit="1"
              :before-upload="handleUploadSuccess"
              class="avatar-uploader"
              :class="leftData.hidden"
              name="logoImage"
              :file-list="leftData.fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="leftData.dialogVisible">
              <img width="100%" :src="leftData.dialogImageUrl" />
            </el-dialog>
            <div class="text">上传图像</div>
            <span
              style="font-size: 12px;color: #ccc;width: 170px;display: block"
            >图片建议为100x100，大小不超过300kb的jpg/png/jpeg图像</span>
          </el-col>
          <el-col :span="8" style="margin-top: 20px">
            <el-form ref="form" :model="leftData.form" label-width="80px">
              <el-form-item label="客服经理">
                <el-input
                  size="mini"
                  v-model="leftData.form.manager"
                  clearable
                  placeholder="请输入客服经理"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务热线">
                <el-input
                  size="mini"
                  v-model="leftData.form.hotline"
                  clearable
                  placeholder="请输入服务热线"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <div class="btn">
                  <el-button type="primary" size="mini" @click="handleSaveInfo">保存</el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 自定义信息 -->
      <div class="customItem style2">
        <div class="itemName">
          自定义信息一
          <el-switch active-color="#409eff" inactive-color="#999" v-model="leftData.customMsg1"></el-switch>
        </div>
        <el-row type="flex" class="row-bg">
          <el-col :span="4">
            <!-- action="http://192.168.1.220:8003/UserInfo/PTUploadLogoFilesAjax" -->
            <el-upload
              action="/UserInfo/PTUploadLogoFilesAjax"
              list-type="picture-card"
              :on-success="handlePictureCardPreview1"
              :on-remove="handleRemove1"
              :limit="1"
              :before-upload="handleUploadSuccess1"
              class="avatar-uploader"
              :class="leftData.hidden1"
              name="logoImage"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="leftData.dialogVisible1">
              <img width="100%" :src="leftData.dialogImageUrl1" />
            </el-dialog>
            <div class="text">上传图像</div>
            <span
              style="font-size: 12px;color: #ccc;width: 170px;display: block"
            >图片建议为260x150，大小不超过300kb的jpg/png/jpeg图像</span>
          </el-col>
          <el-col :span="8" style="margin-top: 20px">
            <el-input
              type="textarea"
              placeholder="请输入跳转链接"
              v-model="leftData.textarea1"
              resize="none"
              rows="5"
            ></el-input>
            <div class="btn">
              <el-button type="primary" size="mini" @click="handleSaveTxt1">保存</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 右边预览内容 -->
    <div class="customization-right">
      <!-- 产品动态和消息 -->
      <div class="viewItem">
        <el-tabs v-model="rightData.activeName" type="card" stretch>
          <el-tab-pane label="待办事项" name="first" v-if="leftData.productDynamic">
            <ul class="backlogList">
              <li>软件更新内容</li>
              <li>查看详情</li>
              <li>德客餐饮版上线</li>
              <li>查看详情</li>
              <li>德客点菜宝上线</li>
              <li>查看详情</li>
              <li>德客外卖汇上线</li>
              <li>查看详情</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="系统消息" name="second" v-show="leftData.notification">
            <div style="margin-left: 20px;margin-bottom: 20px">更新日志 2019.06.01</div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 营销活动 -->
      <div class="viewItem viewImg">
        <img src="http://www.decerp.cc/skin_N3/images/pay_kk215.png" v-show="leftData.payment" />
        <img src="http://www.decerp.cc/skin_N3/images/hardware.png" v-show="leftData.hardwareStore" />
        <img src="http://www.decerp.cc/skin_N3/images/shareenter.png" v-show="leftData.courteous" />
      </div>
      <!-- 客服编辑 -->
      <div class="viewItem viewCode" v-show="leftData.markeEdit">
        <div class="imgCode">
          <img :src="leftData.dialogImageUrl" />
        </div>
        <div class="itemText">
          <span style="margin-bottom: 15px">{{leftData.form.manager}}</span>
          <span>{{leftData.form.hotline}}</span>
        </div>
      </div>
      <!-- 自定义信息1 -->
      <div class="viewItem viewImg" v-show="leftData.customMsg1">
        <a
          :href="leftData.textarea1"
          target="_blank"
          rel="noopener noreferrer"
          style="height: 150px;width: 260px"
        >
          <img
            :src="leftData.dialogImageUrl1"
            style="height: 90%;width: auto;max-width: 250px;margin-top: 3%"
          />
        </a>
      </div>
      <!-- 自定义信息2 -->
      <!-- <div class="viewItem viewImg">
        <img src="http://www.decerp.cc/skin_N3/images/pay_kk215.png" v-if="leftData.customMsg2">
      </div>-->
      <!-- 自定义信息3 -->
      <!-- <div class="viewItem viewImg">
        <div class="title">自定义信息</div>
        <img src="http://www.decerp.cc/skin_N3/images/pay_kk215.png" v-if="leftData.customMsg3">
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 左侧设置功能
      leftData: {
        // 开关功能的数据
        productDynamic: true, // 产品动态
        notification: true, // 系统消息
        payment: true, // 支付功能
        hardwareStore: true, // 硬件商城
        courteous: true, // 推荐有礼
        markeEdit: true, // 客服编辑
        // 客服编辑表单数据
        form: {
          manager: "张三",
          hotline: "8008208820"
        },
        customMsg1: false, // 自定义信息1
        // customMsg2: true,
        // customMsg3: true,
        // 上传的文件的数据
        fileList: [],
        dialogImageUrl: require("../../assets/客服编辑.png"),
        dialogImageUrl1: require("../../assets/test.png"),
        // dialogImageUrl2: "",
        // dialogImageUrl3: "",
        dialogVisible: false,
        dialogVisible1: false,
        // 通过hidden控制类名改变样式
        hidden: "",
        hidden1: "",
        // hidden2: "",
        // hidden3: "",
        // 自定义数据
        textarea1: ""
        // textarea2: "",
        // textarea3: ""
      },
      // 右侧预览内容
      rightData: {
        activeName: "first"
      },
      // 令牌
      myToken: ""
    };
  },
  methods: {
    // 保存修改配置的方法
    saveSetting() {
      const summary = [
        {
          type: 1,
          data: [
            { type: 1, data: "", is_enable: this.leftData.productDynamic }
          ],
          img: ""
        },
        {
          type: 2,
          data: [{ type: 1, data: "", is_enable: this.leftData.notification }],
          img: ""
        },
        {
          type: 3,
          data: [
            { type: 1, data: "", is_enable: this.leftData.payment },
            { type: 2, data: "", is_enable: this.leftData.hardwareStore },
            { type: 3, data: "", is_enable: this.leftData.courteous }
          ],
          img: ""
        },
        {
          type: 4,
          data: [
            {
              type: 1,
              data: this.leftData.form.manager,
              is_enable: this.leftData.markeEdit
            },
            {
              type: 2,
              data: this.leftData.form.hotline,
              is_enable: this.leftData.markeEdit
            }
          ],
          img: this.leftData.dialogImageUrl
        },
        {
          type: 5,
          data: [
            {
              type: 1,
              data: this.leftData.textarea1,
              is_enable: this.leftData.customMsg1
            }
          ],
          img: this.leftData.dialogImageUrl1
        }
      ];
      // console.log(JSON.stringify(summary));
      var fileData = new FormData();
      fileData.append("key", this.myToken);
      fileData.append("custom_config", JSON.stringify(summary));
      this.$api.saveHomepageConfig(fileData).then(res => {
        const { succeed, errmsg } = res;
        if (succeed) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
        } else {
          this.$message.error(errmsg);
        }
      });
    },
    // 文件上传和预览的方法
    // 营销编辑
    handleRemove(file, fileList) {
      this.leftData.hidden = "";
      this.leftData.dialogImageUrl = "";
    },
    handlePictureCardPreview(response, file, fileList) {
      var data = new FormData();
      data.append(file.raw.name, file.raw);
      this.$api.uploadMainPicture(data, "kfbj", this.myToken).then(res => {
        const { succeed, errmsg, values } = res;
        if (succeed) {
          if (errmsg != "上传文件成功！") {
            this.$message.error(errmsg + "——请重新上传");
          } else {
            this.leftData.dialogImageUrl = values;
          }
        }
      });
    },
    // 自定义信息1
    handleRemove1(file, fileList) {
      this.leftData.hidden1 = "";
      this.leftData.dialogImageUrl1 = require("../../assets/test.png");
    },
    handlePictureCardPreview1(response, file, fileList) {
      var data = new FormData();
      data.append(file.raw.name, file.raw);
      this.$api.uploadMainPicture(data, "zdy_5", this.myToken).then(res => {
        const { succeed, errmsg, values } = res;
        if (succeed) {
          if (errmsg != "上传文件成功！") {
            this.$message.error(errmsg + "——请重新上传");
          } else {
            this.leftData.dialogImageUrl1 = values;
          }
        }
      });
    },
    // 处理上传隐藏多余的上传盒子
    handleUploadSuccess(file) {
      this.leftData.hidden = "disabled";
    },
    handleUploadSuccess1(file) {
      this.leftData.hidden1 = "disabled";
    },
    // 保存开关配置
    handleSaveSet() {
      this.saveSetting();
    },
    // 保存营销编辑
    handleSaveInfo() {
      if (this.leftData.form.manager == "") {
        this.$message({
          type: "warning",
          message: "请输入客服经理"
        });
        return;
      }
      if (this.leftData.form.hotline == "") {
        this.$message({
          type: "warning",
          message: "请输入服务热线"
        });
        return;
      }
      this.saveSetting();
    },
    // 保存信息按钮
    handleSaveTxt1() {
      if (this.leftData.textarea1.length > 100) {
        this.$message.error("请输入不超过100字的内容");
        return;
      }
      if (this.leftData.textarea1.length < 5) {
        this.$message.error("请输入正确的链接地址");
        return;
      }
      this.saveSetting();
    }
  },
  mounted() {
    // 获取令牌
    this.myToken = sessionStorage.getItem("myToken");
    // 查询配置
    this.$api.getHomepageConfig(this.myToken).then(res => {
      const { values, succeed } = res;
      if (succeed) {
        const setInfo = JSON.parse(values);
        this.leftData.productDynamic = setInfo[0].data[0].is_enable;
        this.leftData.notification = setInfo[1].data[0].is_enable;
        // 营销活动
        this.leftData.payment = setInfo[2].data[0].is_enable;
        this.leftData.hardwareStore = setInfo[2].data[1].is_enable;
        this.leftData.courteous = setInfo[2].data[2].is_enable;
        // 客服编辑
        this.leftData.markeEdit = setInfo[3].data[0].is_enable;
        this.leftData.form.manager = setInfo[3].data[0].data;
        this.leftData.form.hotline = setInfo[3].data[1].data;
        this.leftData.dialogImageUrl = setInfo[3].img;
        // 自定义信息1
        this.leftData.textarea1 = setInfo[4].data[0].data;
        this.leftData.customMsg1 = setInfo[4].data[0].is_enable;
        this.leftData.dialogImageUrl1 = setInfo[4].img;
      }
    });
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.customization {
  display: flex;
  .customization-left {
    width: 80%;
    .customItem {
      padding: 20px 50px;
      background-color: #fff;
      margin-bottom: 20px;
      .itemName {
        font-weight: 600;
        font-size: 14px;
      }
      &.style1 {
        display: flex;
        justify-content: space-between;
      }
      &.style2 {
        .itemName {
          margin-bottom: 10px;
        }
        .text {
          font-size: 14px;
          text-indent: 50px;
          margin-top: 10px;
        }
        .btn {
          text-align: center;
          margin-top: 10px;
        }
        .activity {
          margin-right: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .customization-right {
    width: 20%;
    .viewItem {
      background-color: #fff;
      margin: 20px;
      margin-top: 0;
      &.viewImg {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        > img {
          width: 256px;
          height: 80%;
          margin: 5px;
        }
      }
      &.viewCode {
        display: flex;
        position: relative;
        .imgCode {
          height: 100px;
          width: 100px;
          padding: 20px;
          img {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .itemText {
          flex: 1;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          justify-content: center;
        }
      }
      .backlogList {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 50%;
        }
      }
    }
  }
}
.customization @{deep} .disabled .el-upload--picture-card {
  display: none;
}
</style>